<template>

  <div class="body-td">
    <HeaDer></HeaDer>
    <div class="top-td">
      <div class="row-td">
        <div class="left-td">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item to="/hp">首页</el-breadcrumb-item>
            <el-breadcrumb-item to="/kfhzl">开放合作列表</el-breadcrumb-item>
            <el-breadcrumb-item>{{indexInfo.name}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>
    <div class="main-td">
      <div class="row-td">
        <h1 style="position: relative; display: flex; align-items: center;">
          <i style="width: 60rem; height: 60rem; margin-right: 4rem; display: inline-block;">
            <img :src="indexInfo.iconUrl" alt="" style="width: 100%;	height: 100%;"></i>
          <span style="width: 92%;display: inline-block;margin-left: 20rem;">{{indexInfo.name}}</span>
        </h1>
        <div class="ceng1-td">
          <img :src="require('../../assets/images/pd-img_09.png')" alt="">
          <b>发布时间：</b>
          <span>{{indexInfo.createTime}}</span>
        </div>
        <div class="ceng1-td">
          <img :src="require('../../assets/images/pd-img_06.png')" alt="">
          <b>链接地址：</b>
          <a @click="handleClick(indexInfo.appUrl)" target="_blank">点击跳转</a>
        </div>
        <div class="titlename-td">
          软件简介
        </div>
        <div class="main-txt-td">
          <p>{{indexInfo.introduce}}</p>
          <p align="center">
            <img :src="indexInfo.uploadUrl" alt="">
          </p>
        </div>
      </div>
    </div>
    <FooTer></FooTer>
  </div>

</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import { getManagement } from "@/api/release/release";
import { getCollectionById,collectionInfo,collectionNoInfo} from "@/api/index"
import { listCooperation, getCooperation, delCooperation, addCooperation, updateCooperation } from "@/api/open/cooperation";
export default {
  dicts: ['release_type'],
  data() {
    return {
      id: null,
      send_type: "",
      title_td: "",
      unit_td: "",
      date_td: "",
      main_txt_td: "",
      fujian: "",
      isFavorited: false,//收藏
      indexInfo:{},//服务信息数据
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.getManagementInfo();
    this.userFavorite();
  },
  methods: {
    getManagementInfo() {
      getCooperation(this.id).then(response => {
       this.indexInfo = response.data;
      });
    },
    userFavorite(){
      if (this.$store.state.user.token!==undefined){
        //说明已经登录了
        getCollectionById(this.newId).then(res=>{
          this.indexInfo=res.data;
          if (res.data.isCollection==='is_col'){
            //说明已经收藏
            this.isFavorited = true;
          }else {
            this.isFavorited = false;
          }
        })
      }
    },
    //收藏
    toggleFavorite() {
      if (this.$store.state.user.token!==undefined){
        if (this.isFavorited){
          //取消收藏
          this.indexInfo.isCollection = "no_col"
          collectionNoInfo(this.indexInfo).then(res=>{
            if (res.code===200){
              this.$message.success("取消收藏成功");
              this.isFavorited = !this.isFavorited;
            }else {
              this.$message.error("收藏失败");
            }
          })
        }else {
          //收藏
          this.indexInfo.isCollection = "is_col"
          collectionInfo(this.indexInfo).then(res=>{
            if (res.code===200){
              this.$message.success("收藏成功");
              this.isFavorited = !this.isFavorited;
            }else {
              this.$message.error("收藏失败");
            }
          })
        }
      }else {
        this.$message.error('请先登录！');
      }
    },
    handleClick(url) {
      if (!url.startsWith('http://') && !url.startsWith('https://')) {
        // 如果没有协议，添加默认的http://协议
        url = 'http://' + url;
      } window.open(url, '_blank');
    },
    handleWebsiteClick(url) {
      if (!url.startsWith('http://') && !url.startsWith('https://')) {
        // 如果没有协议，添加默认的http://协议
        url = 'http://' + url;
      } window.open(url, '_blank');
    },
    formatterType(value) {
      var type = "";
      this.dict.type.release_type.forEach(item => {
        if (item.value == value)
          type = item.label;
      });
      return type;
    },
  },
  components: {
    HeaDer,
    FooTer
  },
}
</script>

<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

.body-td {
  height: 100%;
  width: 100%;
  font-size: 14rem;
  font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif;
  color: #384a66;
}

.row-td {
  width: 1532rem;
  margin: 0 auto;
}

.top-td {
  width: 100%;
  height: 64rem;
  background-color: #f8f9fb;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  box-shadow: 1rem 3rem rgba(0, 0, 0, .03);
}

.top-td>.row-td>.left-td {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.main-td>.row-td {
  padding-top: 45rem;
  padding-bottom: 166rem;
}

.main-td>.row-td>h1 {
  font-size: 24rem;
  margin-bottom: 30rem;
}

.main-td>.row-td>.ceng1-td {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top: 12rem;
}

.main-td>.row-td>.ceng1-td>img {
  width: 16rem;
  height: 16rem;
  margin-right: 10rem;
}

.main-td>.row-td>.left-td>.ceng1-td>b {
  font-weight: 500;
}

.titlename-td {
  background: url(../../assets/images/pd-img_12.png) no-repeat scroll;
  background-position: bottom;
  display: inline-block;
  padding-bottom: 20rem;
  margin-top: 30rem;
}

.main-txt-td {
  margin-top: 20rem;
  line-height: 32rem;
}

.fujian-td {
  padding-top: 40rem;
  padding-bottom: 10rem;
}

.main-td>.row-td>.bottom-td {
  background-color: #eef5f0;
  padding: 22rem 30rem;
}
/* 收藏 */
.favorite-btn{
  padding:10px 0;
  width: 80px;
  border:none;
  border-radius: 5px;
  font-size: 16px;
  color:#606266;
  background: #E5E7E9;
  cursor: pointer;
}
.is-favorited {
  color: white;
  background: #33AD61;
}
.main-td>.row-td>.bottom-td>a {
  color: #35a266;
  display: block;
  line-height: 30rem;
}
a {
  color: blue;  /* 设置链接颜色为蓝色 */
  text-decoration: underline;  /* 添加下划线 */
}

</style>
